<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态绑定 style 对象语法</title>

</head>
<body>
<div id="app">
    <h1 style="color: red; text-decoration: underline">Hello, World！</h1>

    <h1 v-bind:style="{color: 'red'}">Hello, World！</h1>
    <!--  SyntaxError: Unexpected token '-'-->

    <h1 v-bind:style="{textDecoration: 'underline'}">Hello, World！</h1>
    <h1 v-bind:style="{color: 'red', textDecoration: 'underline'}">Hello, World！</h1>
    <h1 v-bind:style="{color: isColorDecorated, textDecoration: isTextDecorated}">Hello, World！</h1>
    <h1 v-bind:style="abc">Hello, World！</h1>
</div>

<script src="../../../../../js/vue.global.js"></script>
<script>

    const app = Vue.createApp({
        data() {
            return {
                isColorDecorated: "silver",
                isTextDecorated: " underline double",

                abc: {
                    color: "red",
                    // text-decoration: underline
                    /*
                    * JavaScript 语言标识符定义要求：
                    *   必须以字母、下划线或美元符号开头。
                    *   可以包含字母、数字、下划线和美元符号。
                    *   标识符区分大小写。
                    * */
                    // 针对样式中的 -， 将其删掉并将其后面的第一个字母大写——转换为驼峰式写法。驼峰命名法将标识符中的每个单词首字母大写，除了第一个单词
                    textDecoration: "underline",
                }
            }
        }
    })

    app.mount("#app")
</script>

</body>
</html>